<template>
  <div>
      
	  <MyHeader></MyHeader>
	<div class="breadcrumb">
		<a href="#">全部分类</a>
		<span>></span>
		<a href="#">新鲜水果</a>
	</div>

	<div class="main_wrap clearfix">
		<div class="l_wrap fl clearfix">
			<div class="new_goods">
				<h3>新品推荐</h3>
				<ul>
					<li>
						<a href="#"><img src="../assets/images/goods/goods001.jpg"></a>
						<h4><a href="#">进口柠檬</a></h4>
						<div class="prize">￥3.90</div>
					</li>
					<li>
						<a href="#"><img src="../assets/images/goods/goods002.jpg"></a>
						<h4><a href="#">玫瑰香葡萄</a></h4>
						<div class="prize">￥16.80</div>
					</li>
				</ul>
			</div>
		</div>

		<div class="r_wrap fr clearfix">
			<div class="sort_bar">
				<a href="#" :class="{'active':flag==1}" @click="cut(1)">默认</a>
			<a href="#" :class="{'active':flag==2}" @click="cut(2)">价格</a>
			<a href="#" :class="{'active':flag==3}" @click="cut(3)">人气</a>
			</div>
		<GoodsPageList :data_list='data_list'></GoodsPageList>
			
			<div class="pagenation">
				<a href="javascript:void" class="active" @click="get_data(cur_num-1)">上一页</a>
                <a href="javascript:void" class="active" v-for="num in page_list" :key="num" @click="get_data(num)">{{num}}</a>
				<a href="javascript:void" class="active" @click="get_data(cur_num+1)">下一页</a>
				<!-- <input type="button" @click="get_data(cur_num-1)" value="上一页">
                <input type="button" v-for="num in page_list" :key="num" :value="num" @click="get_data(num)" style="margin:0px 5px;width:20px">
                <input type="button" @click="get_data(cur_num+1)" value="下一页"> -->
			</div>
		</div>
	</div>
	<MyCertification></MyCertification>
	
  </div>
</template>

<script>
import axios from 'axios'
import mypagelist from './common/Page_list'
import mycertification from './common/Certification'
import myheader from './common/Header'
export default {
	components:{
		'GoodsPageList':mypagelist,
		'MyCertification':mycertification,
		"MyHeader":myheader,
	},
    data(){
        return{
          id:this.$route.query.id,
          data_list:[],
          flag:1,
          cur_num:1,
          page_list:[],
          username:sessionStorage.getItem('username')
        }
    },created(){
        // axios.get('http://127.0.0.1:8000/list',{'params':{'id':this.id,'flag':this.flag}}).then(resp=>{
        //     console.log(resp.data)
        //     this.data_list=resp.data.data
        // }).catch(error=>{
        //     console.log(error)
        // })
        this.get_data(1)
	},
	methods:{
        cut(tab){
            this.flag=tab
            this.get_data(1)
        //     axios.get('http://127.0.0.1:8000/list',{'params':{'id':this.id,'flag':this.flag}}).then(resp=>{
        //     console.log(resp.data)
        //     this.data_list=resp.data.data
        // }).catch(error=>{
        //     console.log(error)
        // })
        },
        get_data(num){
        this.cur_num=num
        axios.get('http://127.0.0.1:8000/list',{'params':{'id':this.id,'flag':this.flag,'num':num}}).then(resp=>{
            console.log(resp.data)
            this.data_list=resp.data.data
            this.page_list=resp.data.page_list
        }).catch(error=>{
            console.log(error)
        })
	},
	search(){
		this.$router.push('/search')
	}
	
    }
    
}
</script>

<style>

</style>